<template>
  <div class="godBox">
    <el-menu class="el-menu-vertical-demo">
      <el-menu-item v-for="(item, index) in aside" :key="index">{{
        item.name
      }}</el-menu-item>
    </el-menu>

    <div class="goods">
      <div v-for="(item, index) in aside" :key="index">
        <p style="color: #888">{{ item.name }}</p>
        <div v-for="(ele, index) in item.foods" :key="index">
          <div>
            <img :src="ele.image" align="left" @click="Details(ele)" />
            <p>
              <strong style="font-size: 20px">{{ ele.name }}</strong>
            </p>
            <p style="color: #888">{{ ele.description }}</p>
            <p style="color: #888">
              {{ "月售" + ele.sellCount + "份" + " " + "好评率" + ele.rating + "%" }}
            </p>
            <p>
              <strong style="color: red"> ￥{{ ele.price }}</strong
              >&emsp;
              <s style="color: #888" v-show="ele.oldPrice">￥{{ ele.oldPrice }}</s>
              <van-stepper
                :v-model="ele.rating / 100"
                theme="round"
                button-size="22"
                disable-input
                style="float: right"
              />
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      aside: [],
      active: 2,
    };
  },
  mounted() {
    this.$http.get("/json/data.json").then((res) => {
      this.aside = res.data.goods;
    });
  },
  methods: {
    // 点击进入详情页面
    Details(ele) {
      console.log(ele);
      this.$store.commit("Details", ele);
      this.$router.push("/details");
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.godBox {
  height: 500px;
  display: flex;
  .goods {
    flex: 1;
    overflow: auto;
    & > div {
      & > div {
        height: 100px;
        background: #fff;
        padding: 10px;
        & > div {
          border-bottom: 1px solid #ddd;
          height: 100%;
          & > img {
            width: 70px;
            height: 70%;
            margin-right: 10px;
          }
          & > p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      & > p {
        background: #ddd;
        border-left: 4px solid #ccc;
        padding: 10px;
      }
    }
  }
  .el-menu {
    width: 100px;
    background: #ddd;
    text-align: center;
    .is-active {
      color: black !important;
    }
    li {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      border: none !important;
    }
  }
}
.el-menu-item-group__title {
  visibility: hidden !important;
}
.van-tabs--line,
.van-sticky {
  display: flex;
  background: pink !important;
}
</style>
